웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS에서 설정된 변수의 값을 지속적으로 관찰하다가 만약 값이 새롭게 바뀌는 경우 특정 함수를 호출할 수 있는 방법이 있습니다. 이 방법은 watch를 등록하는 방법으로 watch는 다른 프론트엔드 프레임워크에서도 쉽게 찾을 수 있는 자주 사용되는 방법입니다.
이처럼 watch는 다음의 목적을 가질 때 사용됩니다.
"변수의 값이 바뀌거나 특정 값이 되는 경우에만 뭔가를 실행 할 때"
이처럼 값이 바뀌는 경우를 주시할 때 사용할 수 있습니다. 간단한 문법은 아래와 같이 사용합니다.
watch: { 주시할 변수명: 실행할 콜백함수(newValue, oldValue) }
여기서 newValue는 새롭게 바뀐 값을 ... 그리고 oldValue는 이 전의 값을 기억합니다. 그럼 어떻게 사용하는지 간단한 예를 함께 알아봅니다. 아래를 봐주세요.
# VueJS watch 예제보기
watch를 사용하는 간단한 예를 들자면 만약 다운로드 횟수를 기억하는 count라는 변수가 있는데 처음 다운로드를 수행하여 0에서 1이 되거나 아니면 count 변수가 5보다 커지는 경우에만 알림을 설정할 수도 있습니다. 이때 아래와 같이 코드를 추가합니다.watch : {
itemNo: function(newValue, oldValue) {
if (newValue == 1) {
// 1보다 커지는 경우 실행
}
else if (newValue > 5) {
// 5보다 커지는 경우에만 실행
}
}
}
itemNo: function(newValue, oldValue) {
if (newValue == 1) {
// 1보다 커지는 경우 실행
}
else if (newValue > 5) {
// 5보다 커지는 경우에만 실행
}
}
}
방법은 매우 간단합니다. 파라미터로 넘겨온 newValue의 값을 확인하여 원하는 함수를 실행하면 됩니다.
! 기존값과 최근값을 비교하여 watch 실행하기
만약 기존값이 반드시 0이면서 새로운 값이 5인 경우에만 어떤 함수를 불러오려면? 이때도 watch를 사용하면 간단합니다. 아래처럼 코드를 추가합니다.watch : {
itemNo: function(newValue, oldValue) {
if (newValue == 5 && oldValue == 0) {
// 기존 값이 0이고 새로운 값이 5인 경우에만 실행
}
}
}
itemNo: function(newValue, oldValue) {
if (newValue == 5 && oldValue == 0) {
// 기존 값이 0이고 새로운 값이 5인 경우에만 실행
}
}
}
여기까지 VueJS에서 watch 사용방법에 대하여 간단하게 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
